<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import course from '@/assets/home/resource/course.png';
import guideline from '@/assets/home/resource/guideline.png';
import system from '@/assets/home/resource/system.png';
import resource_back from '@/assets/home/resource/resource_back.png';
import ArrowRightYellow from '~icons/app/icon-arrow-yellow.svg';
const { t } = useI18n();
const resource = computed(() => {
  return {
    learn_more: t('home.learn_more'),
    cards: [
      {
        id: 'course_certification',
        title: t('home.resource.card_1.title'),
        description: t('home.resource.card_1.description'),
        img: course,
      },
      {
        id: 'system',
        title: t('home.resource.card_2.title'),
        description: t('home.resource.card_2.description'),
        img: guideline,
      },
      {
        id: 'guideline',
        title: t('home.resource.card_3.title'),
        description: t('home.resource.card_3.description'),
        img: system,
      },
    ],
  };
});
</script>
<template>
  <ul class="resource-list">
    <li v-for="item in resource.cards" class="resource-list-item shadow">
      <div class="link">
        <div class="link-container" :style="{ backgroundImage: 'url(' + resource_back + ')' }">
          <img class="img" :src="item.img" :alt="item.id" />
        </div>
        
        <div class="link-text">
          <h1 class="title">{{ item.title }}</h1>
        <p class="description">{{ item.description }}</p>
        <o-button type="text" placement="right" class="btn">
          {{ resource.learn_more }}
          <template #right
            ><o-icon><arrow-right-yellow></arrow-right-yellow></o-icon
          ></template>
        </o-button>
        </div>
        </div>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
.resource-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-content: center;
  &-item {
    list-style: none;
    height: 280px;
    cursor: pointer;
    .link {
      &-container{
        display: flex;
        justify-content: center; 
        align-items: center;
        height: 150px;
      }
      &-text{
        .title {
          padding: 24px 24px 4px;
        font-size: 18px;
        color: var(--theme-title);
      }
      .description {
        padding-left: 24px;
        padding-bottom: 30px;
        font-size: 14px;
        color: #555;
      }
      .btn{
        margin-left: 24px;
      }
      }
    }
  }
}
@media (max-width: 1100px) {
  .resource-list {
    grid-template-columns: repeat(1, 1fr);
    &-item {
      .link {
        &-img {
          height: 80px;
        }
      }
    }
  }
}
</style>
